<template>
  <div class="model-container">
    <div class="listName">会员卡列表</div>
    <!--搜索-->
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <span>快捷搜索</span>
        <div class="btns-wrapper-right">
          <el-button v-if="!searchShow" icon="el-icon-arrow-down" @click="searchShow = true"/>
          <el-button v-else icon="el-icon-arrow-up" @click="searchShow = false"/>
        </div>
      </div>
      <el-collapse-transition>
        <div v-show="searchShow" class="cardbody">
          <el-form ref="seacherParam" :model="seacherParam">
            <el-row :gutter="10">
              <el-col :xl="5" :lg="6" :md="6" :sm="8" >
                <el-col :xl="17" :lg="17" :md="16" :sm="16">
                  <el-form-item prop="nickName">
                    <el-input v-model="seacherParam.searchMessage" size="small" placeholder="会员卡名称" maxlength="15"/>
                  </el-form-item>
                </el-col>
              </el-col>
            </el-row>
            <div class="cardfooter">
              <el-button type="primary" size="mini" plain @click="seachFun">查询</el-button>
              <el-button type="warning" size="mini" plain @click="resetFun">重置</el-button>
            </div>
          </el-form>
        </div>
      </el-collapse-transition>
    </el-card>
    <!--表格-->
    <el-card style="margin-top: 10px">
      <div slot="header" class="clearfix">
        <div class="btns-wrapper-left">
          <el-button type="primary" :disabled="button" plain @click="addMember">新增</el-button>
        </div>
      </div>
      <div class="table-wrapper">
        <el-table v-loading="!dataOption" :stripe="true" :data="dataOption" border empty-text="暂无数据" @selection-change="changeFun">

          <!--          <el-table-column align="center" type="selection" width="55"/>-->
          <el-table-column align="center" prop="cardId" label="编号"/>

          <el-table-column align="center" prop="cardType" label="会员卡名"/>

          <el-table-column align="center" prop="cardPrice" label="办理会员支付金额"/>

          <el-table-column align="center" prop="discount" label="折扣"/>

          <el-table-column align="center" prop="cardNewEffect" label="会员月/次数"/>

          <el-table-column v-if='label1' align="center" prop="name" label="所属门店"/>

          <el-table-column v-if='label' align="center" prop="enterpriseName" label="所属企业"/>

          <el-table-column align="center" label="操作" width="200px">
            <template slot-scope="scope">
              <el-button title="编辑" type="primary" circle icon="el-icon-edit" class="table-icon" @click="edit(scope.row)"/>

              <el-button :disabled="button" title="移除" type="warning" circle icon="el-icon-delete" class="table-icon" @click="delById(scope.row)"/>
            </template>
          </el-table-column>

        </el-table>

        <!--分页-->
        <el-pagination
          :current-page="pageNo"
          :page-sizes="[10, 20, 30]"
          :page-size="pageSize"
          :total="rowCount"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </el-card>

    <!--弹框-->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogState"
      :close-on-click-modal="false"
      :before-close="handleClose"
      top="5vh"
      width="40%">
      <el-form ref="dialogBindData" :model="dialogBindData" :rules="rules" label-width="30%" status-icon class="demo-ruleForm">
        <div class="formBody">
          <el-form-item label="会员卡名称" prop="cardType">
            <el-input :disabled="this.button" v-model="dialogBindData.cardType" size="small" type="text" placeholder="请输入会员卡名称" maxlength="15"/>
          </el-form-item>
          <el-form-item label="办理会员支付金额" prop="cardPrice">
            <el-input :disabled="this.button" v-model="dialogBindData.cardPrice" size="small" type="number" placeholder="请输入办理会员支付金额" maxlength="15"/>
          </el-form-item>
          <el-form-item label="折扣" prop="discount">
            <el-input :disabled="this.button" v-model="dialogBindData.discount" size="small" type="number" placeholder="请输入会员享受折扣" maxlength="15"/>
          </el-form-item>
          <el-form-item label="会员次/月数" prop="cardEffect">
            <el-input :disabled="this.button" v-model="dialogBindData.cardEffect" size="small" type="number" placeholder="请输入会员享受次/月" maxlength="15"/>
          </el-form-item>
          <el-form-item label="会员卡类型" prop="type">
            <el-select :disabled="this.button" v-model="vipType" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.cardTypeId"
                :label="item.cardType"
                :value="item.cardTypeId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-show=!label label="所属门店" prop="shopId" >
            <el-select :disabled="this.button" v-model="shopId" placeholder="请选择">
              <el-option
                v-for="item in Moptions"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="btns-wrapper">
          <el-button size="small" @click="handleClose">取 消</el-button>
          <el-button :loading="buttonState" type="primary" :disabled="button" size="small" @click="submmitFun">保 存</el-button>
        </div>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
  import * as member from '../../api/member'
  import * as userMessage from '../../utils/auth'
  import ImageCropper from '@/components/ImageCropper'
  import {isvalidNull, validatePhone} from "../../utils/validate";

  export default {
    components: {
      ImageCropper
    },
    data() {
      return {
        neid:'',
        shopId:'',
        label:true,
        label1:true,
        button:false,
        // 页面搜索
        seacherParam: {
          searchMessage: ''
        },
        searchShow: false,
        pageNo: 1,
        pageSize: 10,
        rowCount: null, // 总条数
        // 弹框
        dialogType: 1, // 1--增加  2--编辑  3--查看
        dialogState: false,
        dialogState1: false,
        // 按钮状态
        buttonState: false,
        // 列表数据
        dataOption: null,
        datavalID: [],
        // 提交内容
        type: '',
        dialogBindData: {
          cardId:'',
          cardType:'',
          cardPrice:'',
          discount:'',
          cardEffect:'',
          shopId:'',
        },
        rules: {
          cardType: [
            { required: true, message: '会员卡名称不能为空', trigger: 'blur' },
          ],
          cardPrice: [
            { required: true, message: '办理会员支付金额不能为空', trigger: 'blur' },
          ],
          discount: [
            { required: true, message: '折扣不能为空', trigger: 'blur' },
          ],
          cardEffect: [
            { required: true, message: '会员次/月数不能为空', trigger: 'blur' },
          ],
        },
        sc:'',
        vipType:'0',
        startDatePicker: this.beginDate(),
        // 上传头像
        actionUrl: '',
        imagecropperShow: false,
        imagecropperKey: 0,
        picUrl: '',
        options:[
          {cardTypeId:'0',cardType:'月'},
          {cardTypeId:'1',cardType:'次' }
        ],
        Moptions:'',
        nmId:'',
        cardId:'',

      }
    },
    computed: {
      dialogTitle() {
        if (this.dialogType === 1) {
          return '新增会员卡'
        }
        if (this.dialogType === 2) {
          return '编辑会员卡'
        } else {
          return '查看'
        }
      }
    },

    beforeMount() {
      this.quanxian()
      // this.getList()
    },

    created() {
      this.initUploadFileurl()
    },
    methods: {
      beginDate() {
        const self = this
        return {
          disabledDate(time) {
            //alert(time.getTime()+"  "+new Date(self.dialogBindData.lastTime).getTime()+"   "+Date.now())
            return time.getTime()>Date.now();
          }
        }
      },
      initUploadFileurl() {
        this.actionUrl = process.env.BASE_API + 'file/uploadImageAndCrtThumbImagesRichEdit'
      },
      seachFun() {
        this.pageNo = 1
        this.pageSize = 10
        const url = this.searchData()
        var sys_user=JSON.parse(userMessage.getUserInformation());
        if(!sys_user.neid||sys_user.neid==='1'){
          if(!sys_user.shopId){
            //你是平台
            if(sys_user.neid!=='1'){
              this.button=true;
            }
            this.getListQi(url)
          }else{
            //你是门店
            this.label=false;
            this.label1=false;
            this.shopId=sys_user.shopId;
            this.getListMen(url)
          }
        }else{
          //你是企业
          this.label=false;
          this.getList(url)
        }
      },
      getList(data) {
        let url = ''
        if (data !== '' && data !== undefined) {
          url = data
        }
        const param = {
          current: this.pageNo,
          size: this.pageSize,
          url: url
        }
        member.getmemberCard(param).then(res => {
          console.log(res)
          if (res.data.code !== 1) {
            this.$message.error(res.data.msg)
            return false
          }
          if (res.data.data === 'null' || res.data.data === null) {
            return false
          }
          // 初始话表格数据
          this.dataOption = res.data.data
          // 初始化分页数据
            member.pageCat(param).then(res => {
              console.log(res)
              this.rowCount = res.data.count
              this.pageSize = res.data.size
            })

        })
      },

      getListMen(data) {
        let url = ''
        if (data !== '' && data !== undefined) {
          url = data
        }
        const param = {
          current: this.pageNo,
          size: this.pageSize,
          url: url,
          shopId:this.shopId,
        }
        member.getmemberCardMen(param).then(res => {
          console.log(res)
          if (res.data.code !== 1) {
            this.$message.error(res.data.msg)
            return false
          }
          if (res.data.data === 'null' || res.data.data === null) {
            return false
          }
          // 初始话表格数据
          this.dataOption = res.data.data
          // 初始化分页数据
          member.pageCat1(param).then(res => {
            console.log(res)
            this.rowCount = res.data.count
            this.pageSize = res.data.size
          })

        })
      },
      getListQi(data) {
        let url = ''
        if (data !== '' && data !== undefined) {
          url = data
        }
        const param = {
          current: this.pageNo,
          size: this.pageSize,
          url: url,
          id:this.neid
        }
        member.getmemberCardQi(param).then(res => {
          //console.log(res)
          if (res.data.code !== 1) {
            this.$message.error(res.data.msg)
            return false
          }
          if (res.data.data === 'null' || res.data.data === null) {
            return false
          }
          // 初始话表格数据
          this.dataOption = res.data.data
          // 初始化分页数据
          member.pageCat2(param).then(res => {
            console.log(res)
            this.rowCount = res.data.count
            this.pageSize = res.data.size
          })

        })
        member.selectByCId(this.neid).then(res => {
          if (res.data.code !== 1) {
            this.$message.error(res.data.msg)
            return false
          }
          if (res.data.data === 'null' || res.data.data === null) {
            return false
          }
          console.log(res)
          this.Moptions = res.data.data
        })
      },
      // 编辑
      edit(data) {
        console.log(data)
        //this.vipValue=this.sc.data.cardId
        this.nvIdShow=true
        this.vipType=data.type+''
        this.dialogType = 2
        this.dialogState = true
        if(this.button){
          this.shopId=data.name
        }else{
          this.shopId=data.shopId+''
        }
        this.dialogBindData.nmId = data.nmId
        if (data.picUrl === null || data.picUrl === '' || data.picUrl === undefined) {
          this.picUrl = 'https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'
        } else {
          this.picUrl = data.picUrl
        }
        this.reBindData(data)
      },
      //增加客户
      addMember(data) {
        this.vipType='0'
        this.dialogType = 1
        this.dialogState = true
        if (data.picUrl === null || data.picUrl === '' || data.picUrl === undefined) {
          this.picUrl = 'https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'
        } else {
          this.picUrl = data.picUrl
        }
      },
      // 提交
      submmitFun() {
        if(!this.vipValue){
          this.vipValue='0';
        }
        const param = {
          // nickName: this.dialogBindData.nickName,
          // mobilePhone: this.dialogBindData.mobilePhone,
          // gender: this.dialogBindData.gender,
          cardId:this.dialogBindData.cardId,
          cardType:this.dialogBindData.cardType,
          cardPrice:this.dialogBindData.cardPrice,
          discount:this.dialogBindData.discount,
          cardEffect:this.dialogBindData.cardEffect,
          type:this.vipType,
          picUrl: this.picUrl,
          loginLockStatus: 0,
        }
        if(this.shopId!==''){
          param.shopId=this.shopId;
        }else{
          param.shopId=this.dialogBindData.shopId
        }
        if(this.vipType==='0'){
          param.cardNewEffect=param.cardEffect+"个月"
        }else if(this.vipType==='1'){
          param.cardNewEffect=param.cardEffect+"次"
        }

        console.log(param)
        this.$refs.dialogBindData.validate((valid) => {
          if (valid) {
            if (this.dialogType === 2) {
              member.editorMemberCard(param).then(res => {
                if (res.data.code !== 1) {
                  this.$message({
                    message: res.data.msg,
                    type: 'warning'
                  })
                  this.buttonState = false
                  return false
                }
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
                this.buttonState = false
                this.dialogState = false
                if(this.neid){
                  this.getListQi()
                }else{
                  this.getListMen()
                }
                this.handleClose()
              })
            }else if(this.dialogType===1){
              member.addMemberCard(param).then(res => {
                if (res.data.code !== 1) {
                  this.$message({
                    message: res.data.msg,
                    type: 'warning'
                  })
                  this.buttonState = false
                  return false
                }
                this.$message({
                  message: '增加成功',
                  type: 'success'
                })
                this.buttonState = false
                this.dialogState = false
                if(this.neid){
                  this.getListQi()
                }else{
                  this.getListMen()
                }
              })
            }
          }
        })
      },
      // 删除
      delById(data) {
        this.$confirm('此操作将永久删除该会员卡类型, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.delList(data.cardId)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      delList(data) {
        member.delMemberCard(data).then(res => {
          if (res.data.code === 1) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            if(this.neid){
              this.getListQi()
            }else{
              this.getListMen()
            }
          }
        })
      },
      changeFun(data) {
        this.datavalID = data
      },
      // 反显
      reBindData(data) {
        for (const key in this.dialogBindData) {
          this.dialogBindData[key] = data[key]
        }
      },
      // 搜索过滤
      searchData() {
        const arr = []
        for (const key in this.seacherParam) {
          if (this.seacherParam[key] !== '') {
            arr.push('&' + key + '=' + this.seacherParam[key])
          }
        }
        const url = arr.join('')
        return url
      },
      // 重置
      resetFun() {
        this.$refs.seacherParam.resetFields()
        this.pageNo = 1
        this.pageSize = 10
        this.getList()
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
        this.pageNo = val
        this.getList()
      },
      handleClose() {
        for (const key in this.dialogBindData) {
          this.dialogBindData[key] = ''
        }
        this.type = ''
        this.dialogState = false
        this.dialogState1 = false
        this.$refs.dialogBindData.clearValidate()
      },
      // 上传头像
      cropSuccess(resData) {
        this.imagecropperShow = false
        this.imagecropperKey = this.imagecropperKey + 1
        this.picUrl = resData.data[0].maxImageUrl
      },
      close() {
        this.imagecropperShow = false
      },
      quanxian(){
        var sys_user=JSON.parse(userMessage.getUserInformation());
        console.log(sys_user)
        if(!sys_user.neid||sys_user.neid==='1'){
          if(!sys_user.shopId){
            if(sys_user.neid!=='1'){
              this.button=true;
            }
            this.getList()
          }else{
            this.label=false;
            this.label1=false;
            this.shopId=sys_user.shopId;
            this.getListMen()
          }
        }else{
          this.label=false;
          this.neid = sys_user.neid
          this.getListQi()
        }
      },
    }
  }
</script>
<style type="text/scss" lang="scss" scoped>
  .uploadImg{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    /*border: 1px dashed #dcdfe6;*/
    img{
      display: block;
      border-radius: 50%;
      width: 100%;
      height: 100%;
    }
    .uploadImg_mock{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: rgba(0,0,0,0);
      transition:background-color 0.35s;
      -webkit-transition: background-color 0.35s;
      i{
        position: absolute;
        top: 50%;
        left: 50%;
        color: #fff;
        font-size: 26px;
        margin-left: -12px;
        margin-top: -16px;
        opacity: 0;
        transition:opacity 0.35s;
        -webkit-transition: opacity 0.35s;
      }
    }
    &:hover .uploadImg_mock{
      background-color: rgba(0,0,0,0.5);
      i{
        opacity: 1;
      }
    }
  }

</style>
